<template>
    <vol-box
        :title="title"
        v-model="dialogVisible"
        :width="volBoxWidth"
        :draggable="true"
        :on-model-close="closeDialog"
    >
        <template #content>
            <div style="display: flex; justify-content: space-between;">
                <div style="width: 768px; height: 710px;">
                    <!-- 人员信息 -->
                    <employment-registration
                        style="width: 100%;"
                        :rowData="PersonInfo"
                    />
                </div>
                <div style="width: calc(100% - 768px); height: 710px; padding-left: 20px; padding-top: 30px;display: flex;">
                    <el-steps direction="vertical" :active="stepActive" space="140px" :style="volBoxWidth === 1400 ? {width: '50%'} : { width: '100%' }">
                        <el-step
                            v-for="(item, index) in stepList"
                            :title="item.stepName"
                        >
                            <template #description>
                                <div v-if="item.stepAttrType === 'start'">
                                    <div class="step-description">{{ item.creator ? '发起人：' + item.creator : '' }}</div>
                                    <div class="step-description">{{ item.createDate ? '时间：' + item.createDate : '' }}</div>
                                </div>
                                <div v-if="item.stepAttrType === 'node' || item.stepAttrType === 'end'">
                                    <template v-if="auditStatus === 3 && item.stepAttrType === 'node'">
                                        <div class="step-description">{{ steplog[index].auditor ? '审批人：' + steplog[index].auditor : '' }}</div>
                                        <div class="step-description">{{ steplog[index].auditDate ? '审批时间：' + steplog[index].auditDate : '' }}</div>
                                        <div class="step-description">
                                            <span>状态：拒绝</span>
                                        </div>
                                        <div class="step-description">{{ steplog[index].auditResult ? '备注：' + steplog[index].auditResult : '' }}</div>
                                    </template>
                                    <template v-else>
                                        <div class="step-description">{{ item.auditor ? '审批人：' + item.auditor : '' }}</div>
                                        <div class="step-description">{{ item.auditDate ? '审批时间：' + item.auditDate : '' }}</div>
                                        <div class="step-description">
                                            <span v-if="item.auditStatus === 0">状态：待审核</span>
                                            <span v-if="item.auditStatus === 1">状态：通过</span>
                                            <span v-if="item.auditStatus === 2">状态：审核中</span>
                                            <span v-if="item.auditStatus === 3">状态：拒绝</span>
                                        </div>
                                        <div class="step-description">{{ item.remark ? '备注：' + item.remark : '' }}</div>
                                    </template>
                                </div>
                            </template>
                        </el-step>
                    </el-steps>
                    <div v-if="volBoxWidth === 1400" style="width: 50%;">
                        <div class="vertical-center">
                            <span class="title">审批：</span>
                            <el-radio-group v-model="approvalStatus">
                                <el-radio :value="1">通过</el-radio>
                                <el-radio :value="3">拒绝</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="vertical-center" style="margin-top: 30px;">
                            <span class="title">备注：</span>
                            <el-input
                                :rows="4"
                                type="textarea"
                                placeholder="请输入备注"
                                v-model="remarks"
                                style="width: 80%;"
                            />
                        </div>
                        <div style="margin-top: 30px; text-align: center;">
                            <el-button
                                type="primary"
                                @click="approvalBtn"
                            >
                                审批
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template #footer>
            <div>
                <el-button
                    @click="closeDialog"
                >
                    关闭
                </el-button>
            </div>
        </template>
    </vol-box>
</template>
  
<script setup>
import { ref, computed } from 'vue'
import VolBox from '@/components/basic/VolBox.vue'
import http from '@/api/http'
import EmploymentRegistration from '@/components/company/EmploymentRegistration.vue'
import { ElMessage } from 'element-plus'

// 变量
const title = ref('')
const dialogVisible = ref(false)
const approvalStatus = ref('')
const remarks = ref('')
const rowData = ref(null)
const stepList = ref([])
const steplog = ref([])
const auditStatus = ref(null)
const stepActive = computed(() => {
    for (let i = 0; i < stepList.value.length; i++) {
        if (stepList.value[i].isCurrent) {
            return i + 1
        }
    }
})
const volBoxWidth = computed(() => {
    for (let i = 0; i < stepList.value.length; i++) {
        if (stepList.value[i].isCurrent && stepList.value[i].isCurrentUser && rowData.value.AuditStatus === 0) {
            return 1400
        }
    }
    return 1030
})
const PersonInfo = ref(null)

// 函数
const emits = defineEmits(['success'])
defineExpose(
    {
        open
    }
)

function open(parameter) {
    title.value = parameter.title
    rowData.value = parameter.row
    PersonInfo.value = parameter.row.PersonInfo
    init()
    dialogVisible.value = true
}

function closeDialog() {
    approvalStatus.value = ''
    remarks.value = ''
    dialogVisible.value = false
}

function approvalBtn() {
    if (!approvalStatus.value) {
        ElMessage({
            message: '请选择审批！',
            type: 'warning'
        })
        return
    }
    const params = [`${rowData.value.WorkTableKey}`]
    http.post(`/api/EPersonInfo/audit?auditReason=${remarks.value}&auditStatus=${approvalStatus.value}`, params).then(res => {
        if (res.status) {
            ElMessage({
                message: '审核成功！',
                type: 'success'
            })
            closeDialog()
            emits('success')
        }
    }).catch(error => {
        console.log(error)
    })
}

function init() {
    const params = [`${rowData.value.WorkTableKey}`]
    http.post(`/api/Sys_WorkFlow/getSteps?tableName=${rowData.value.WorkTable}`, params).then(res => {
        if (res.status && res.list) {
            stepList.value = res.list
            steplog.value = res.log
            auditStatus.value = res.auditStatus
        }
    }).catch(error => {
        console.log(error)
    })
}
</script>
  
<style lang="less" scoped>
.title {
    color: black;
    margin-right: 16px;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.step-description {
    color: #333;
    margin-bottom: 5px;
}
</style>
